<script setup lang="ts">
//首先将monaco全部引入重命名为monaco monaco需要挂载到一个节点上面某个div或者什么
// 但是挂载之前此实例必须存在需要使用onMounted函数，在初始化完成之后进行monaco创建
import * as monaco from "monaco-editor";
import { onMounted, ref, toRaw, withDefaults, defineProps, watch } from "vue";

// 在div上使用了ref将此变量指向需要挂载的div
const codeEditorRef = ref();
// 将monaco创建出来的作为全局变量
const codeEditor = ref();

interface Props {
  value: string;
  codeLanguage: string;
  handleChange: (v: string) => void;
}

const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  codeLanguage: () => "java",
  handleChange: (v: string) => {
    console.log(v);
  },
});

// 第一个参数为需要监听的参数， 第二个参数为回调函数，当需要监听的参数发生变化时调用回调函数
watch(
  () => props.codeLanguage,
  () => {
    if (codeEditor.value) {
      monaco.editor.setModelLanguage(
        toRaw(codeEditor.value).getModel(),
        props.codeLanguage
      );
    }
  }
);

onMounted(() => {
  if (!codeEditorRef.value) return;
  // 第一个参数为需要的节点 第二个为此编辑器的配置
  codeEditor.value = monaco.editor.create(codeEditorRef.value, {
    value: props.value,
    // 使用语言
    language: props.codeLanguage,
    automaticLayout: true,
    // 行号
    lineNumbers: "on",
    // 小地图
    minimap: {
      enabled: true,
    },
    // roundedSelection: false,
    // scrollBeyondLastLine: false,
    // readOnly: false,
    theme: "vs-dark",
  });
  codeEditor.value.onDidChangeModelContent(() => {
    props.handleChange(toRaw(codeEditor.value).getValue());
  });
});
</script>

<template>
  <!--  编辑器挂载到此div容器中-->
  <div
    id="code-editor"
    ref="codeEditorRef"
    style="min-height: 600px; height: 80vh"
  ></div>
</template>

<style scoped></style>
